<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建数据表页面</title>
</head>
<body>
  <h2>创建数据表</h2>
  <form id="createTableForm">
    <label for="tableName">表名：</label>
    <input type="text" id="tableName" name="tableName"><br><br>
    <div id="fields">
      <div class="field">
        <label for="fieldName1">字段名：</label>
        <input type="text" id="fieldName1" name="fieldName[]">
        <label for="fieldType1">数据类型：</label>
        <input type="text" id="fieldType1" name="fieldType[]">
        <label for="fieldLength1">长度：</label>
        <input type="text" id="fieldLength1" name="fieldLength[]">
        <label for="fieldDecimals1">小数点：</label>
        <input type="text" id="fieldDecimals1" name="fieldDecimals[]">
        <input type="checkbox" id="fieldNotNull1" name="fieldNotNull[]">
        <label for="fieldNotNull1">非空</label>
        <input type="checkbox" id="fieldPrimaryKey1" name="fieldPrimaryKey[]">
        <label for="fieldPrimaryKey1">主键</label>
        <label for="fieldDefaultValue1">默认值：</label>
        <input type="text" id="fieldDefaultValue1" name="fieldDefaultValue[]">
        <label for="fieldComment1">注释：</label>
        <input type="text" id="fieldComment1" name="fieldComment[]">
        <label for="fieldCharset1">字符集：</label>
        <input type="text" id="fieldCharset1" name="fieldCharset[]">
        <label for="fieldCollate1">校对规则：</label>
        <input type="text" id="fieldCollate1" name="fieldCollate[]">
      </div>
    </div>
    <button type="button" onclick="addField()">添加字段</button><br><br>
    <button type="submit">创建数据表</button>
  </form>

  <script>
    let fieldCounter = 1;

    function addField() {
      fieldCounter++;
      const fieldsDiv = document.getElementById("fields");
      const newFieldDiv = document.createElement("div");
      newFieldDiv.className = "field";
      newFieldDiv.innerHTML = `
        <label for="fieldName${fieldCounter}">字段名：</label>
        <input type="text" id="fieldName${fieldCounter}" name="fieldName[]">
        <label for="fieldType${fieldCounter}">数据类型：</label>
        <input type="text" id="fieldType${fieldCounter}" name="fieldType[]">
        <label for="fieldLength${fieldCounter}">长度：</label>
        <input type="text" id="fieldLength${fieldCounter}" name="fieldLength[]">
        <label for="fieldDecimals${fieldCounter}">小数点：</label>
        <input type="text" id="fieldDecimals${fieldCounter}" name="fieldDecimals[]">
        <input type="checkbox" id="fieldNotNull${fieldCounter}" name="fieldNotNull[]">
        <label for="fieldNotNull${fieldCounter}">非空</label>
        <input type="checkbox" id="fieldPrimaryKey${fieldCounter}" name="fieldPrimaryKey[]">
        <label for="fieldPrimaryKey${fieldCounter}">主键</label>
        <label for="fieldDefaultValue${fieldCounter}">默认值：</label>
        <input type="text" id="fieldDefaultValue${fieldCounter}" name="fieldDefaultValue[]">
        <label for="fieldComment${fieldCounter}">注释：</label>
        <input type="text" id="fieldComment${fieldCounter}" name="fieldComment[]">
        <label for="fieldCharset${fieldCounter}">字符集：</label>
        <input type="text" id="fieldCharset${fieldCounter}" name="fieldCharset[]">
        <label for="fieldCollate${fieldCounter}">校对规则：</label>
        <input type="text" id="fieldCollate${fieldCounter}" name="fieldCollate[]">
      `;
      fieldsDiv.appendChild(newFieldDiv);
    }

    document.getElementById("createTableForm").addEventListener("submit", function (event) {
      event.preventDefault();
      const form = event.target;
      const formData = new FormData(form);
      const fields = [];
      const fieldDivs = document.querySelectorAll(".field");
      
      fieldDivs.forEach((fieldDiv) => {
        const fieldName = fieldDiv.querySelector("input[name^='fieldName']").value;
        const fieldType = fieldDiv.querySelector("input[name^='fieldType']").value;
        const fieldLength = fieldDiv.querySelector("input[name^='fieldLength']").value;
        const fieldDecimals = fieldDiv.querySelector("input[name^='fieldDecimals']").value;
        const fieldNotNull = fieldDiv.querySelector("input[name^='fieldNotNull']").checked;
        const fieldPrimaryKey = fieldDiv.querySelector("input[name^='fieldPrimaryKey']").checked;
        const fieldDefaultValue = fieldDiv.querySelector("input[name^='fieldDefaultValue']").value;
        const fieldComment = fieldDiv.querySelector("input[name^='fieldComment']").value;
        const fieldCharset = fieldDiv.querySelector("input[name^='fieldCharset']").value;
        const fieldCollate = fieldDiv.querySelector("input[name^='fieldCollate']").value;

        fields.push({
          name: fieldName,
          type: fieldType,
          length: fieldLength,
          decimals: fieldDecimals,
          notNull: fieldNotNull,
          primaryKey: fieldPrimaryKey,
          defaultValue: fieldDefaultValue,
          comment: fieldComment,
          charset: fieldCharset,
          collate: fieldCollate,
        });
      });

      fetch("http://192.168.1.53:3000/generate/create", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          tableName: formData.get("tableName"),
          fields: fields,
        }),
      })
        .then((response) => response.text())
        .then((data) => {
          alert(data);
          form.reset();
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    });
  </script>
</body>
</html>
